<template>
    <div class="container">
        <div class="top main">
            <img class="logo" src="@/assets/image/logo.png" alt="logo">
            <a class="download" href="https://cdn.hnqingnai.com/prod/static/shouliao.apk">下载瘦疗APP</a>
            <img class="qrcode" src="@/assets/image/qrcode.png" alt="瘦疗">
        </div>
        <div class="header">
            <div class="main h-full justify-between align-end">
                <div class="desc flex-col justify-center h-full">
                    <p class="text">您身边的</p>
                    <p class="text p2"><span>体重管理</span>专家</p>
                    <p class="p3"><span>- - - <i class="dot"></i></span> 减的多，花的少，服务好</p>
                </div>
                <img class="img-1" src="@/assets/image/1-main.png" alt="">
            </div>
        </div>
        <div class="second main">
            <img src="@/assets/image/icon.png" alt="烟花" />
            <h1>成功为大家减去体重</h1>
            <p class="num"><span>16801.46</span><i>公斤</i></p>
            <div class="intro">
                <p>瘦疗健康专注于体重管理 <span>10</span> 年，秉承 <span>“减的多，花的少，服务好”</span> 的理念</p>
                <p>不断创造优化软件服务及健康产品-- <span>瘦疗健康App</span></p>
                <p>为大家提供包含饮食、运动、用药等在内的多方位体重管理方案</p>
                <p>更致力于为减肥瘦身人群提供问饮食、减重指导，已成为 <span>1.2万</span> 用户的体重管理选择</p>
            </div>
        </div>
        <div class="third">
            <div class="main h-full justify-between align-center">
                <img class="img-3" src="@/assets/image/3-main.png" alt="">
                <div class="right flex-col justify-center h-full">
                    <p class="title">瘦疗健康App</p>
                    <p class="label">
                        瘦疗健康App是热门的体重管理平台，为用户提供数字化体重管理工具、专家减重指导、科学减重服务、食品保健品等在内的个性化体重管理方案，以让用户获得“减的多、花的少、服务好”
                        的减重体验为首要目标。App内的食物热量查询、AI体重管理师、减肥食谱、智能体朋秤、24项健康指标等产品功能，被用户广泛、高频使用。</p>
                    <!-- <p class="btn">瘦疗健康App合作联系:</p> -->
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="main justify-between align-center">
                <div class="left">
                    <h1 class="title">关于瘦疗</h1>
                    <p class="label">
                        湖南瘦疗健康咨询管理有限公司，总部位于湖南省长沙市，从事大健康行业深耕多年，拥有成熟的研发团队与资深营养师团队，专注于服务全国广大女性用户群体，提供健康科学的身形体态管理，与营养知识建议，助力每一位女性用户完成蜕变成为更美好的自己。且公司与杭州如哈哈等国民品牌均保持高水平的深度合作与技术交流，致力于打造一个共同向往的商业愿景。
                    </p>
                    <p class="btn">公司联系电话:400-609-9920</p>
                </div>
                <img class="img-4" src="@/assets/image/4-main.png" alt="">
            </div>
        </div>
         <div class="main record justify-between align-center">
            <p>Copyright 湖南瘦疗健康科技有限公司 版权所有</p>
            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">湘ICP备2025126224号-1</a>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

</script>
<style lang="scss" scoped>
.home {
    background: #fff;
}

.top {
    position: relative;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
        width: 64px;
        height: 48px;
    }
    .download {
        padding: 10px 20px;
        background: #0CC3C4;
        border-radius: 30px;
        font-size: 18px;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }
    
    .qrcode {
        position: absolute;
        right: 0;
        top: 80px;
        width: 150px;
        height: 150px;
        z-index: 9;
        display: none;
    }
}
.download:hover + .qrcode {
    display: block;
}

.header {
    position: relative;
    width: 100%;
    height: 640px;
    background: url('@/assets/image/1-bg.png') no-repeat center;
    background-size: 100% 100%;
    .img-1 {
        width: 662px;
        height: 543px;
    }
    .text {
        font-size: 50px;
        font-weight: bold;
        font-style: italic;
    }

    span {
        color: #0CC3C4;
    }

    .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #0CC3C4;
        border-radius: 50%;
    }

    .p2 {
        margin: 8px 0 30px;
    }
    .p3 {
        font-style: italic;
        font-size: 18px;
    }
}
.second {
    text-align: center;
    padding: 50px 0;

    h1 {
        font-size: 40px;
        font-weight: bold;
        margin: 10px 0 20px;
    }

    .num {
        margin-bottom: 20px;

        span {
            font-style: italic;
            font-size: 40px;
            color: #0CC3C4;
        }
        i {
            font-size: 20px;
            margin-left: 8px;
        }
    }

    .intro {
        font-size: 18px;
        line-height: 30px;

        span {
            color: #0CC3C4;
        }
    }
}

.third {
    width: 100%;
    height: 640px;
    background: url('@/assets/image/3-bg.png') no-repeat center;
    background-size: 100% 100%;
    .img-3 {
        width: 645px;
        height: 448px;
    }
    .right {
        margin-left: 50px;

        .title {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .label {
            font-size: 16px;
            line-height: 30px;
            text-align: justify;
        }

        .btn {
            width: 70%;
            margin-top: 20px;
            background: #ACF8F8;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 20px;
        }
    }
}
.footer {
    padding: 50px 0;
    .img-4 {
        width: 596px;
        height: 464px;
    }
    .left {
        text-align: justify;
        margin-right: 94px;

        .title {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .label {
            font-size: 16px;
            line-height: 30px;
        }
        .btn {
            font-size: 20px;
            width: 70%;
            margin-top: 20px;
            background: #ACF8F8;
            padding: 10px 20px;
            border-radius: 20px;
        }
    }
}
.record {
  padding: 20px 0 50px;
  font-size: 16px;

  a {
    color: #000;
  }
}
</style>